<template>
  <div id="exchangemall">
    <!-- 引入头部 -->
    <navigationBar></navigationBar>
    <div class="container">
      <!--浏览器居中部分 -->
      <div class="section">
        <!-- 顶部面包屑 -->
        <div class="crumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"
              >积分商城</el-breadcrumb-item
            >
            <el-breadcrumb-item>兑换商品</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 商品信息 -->
        <div class="goodsinfo">
          <!-- 标题 -->
          <span class="title">商品信息:</span>
          <!-- 下方详细信息-->
          <div class="info">
            <!-- 商品图片 -->
            <img :src="imgurl" alt />
            <div class="right_info">
              <!-- 商品名称 -->
              <span>{{ goodsname }}</span>
              <!-- 商品价格 -->
              <span>市场价:&nbsp;{{ goodsprice }}</span>
              <!-- 商品消耗积分数 -->
              <span>兑换消耗:&nbsp;{{ integral }}</span>
              <!-- 当前总的几分熟 -->
              <span>当前积分:&nbsp;{{ current_integral }}</span>
            </div>
          </div>
        </div>
        <!-- 兑换信息 -->
        <div class="ex_msg">
          <span class="title">兑换信息:</span>
          <!-- 兑换数量 -->
          <div class="ex_num">
            <span class="num">兑换数量:</span>
            <!-- 数量计数器 -->
            <div class="cup_num">
              <el-input-number
                v-model="num"
                size="small"
                @change="handleChange"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </div>
          </div>
          <!-- 收货地址 -->
          <div class="ex_address">
            <span class="address">收货地址:</span>
            <!-- 选择默认地址 -->
            <div class="option">
              <el-radio-group
                v-model="radio"
                style="display:flex;flex-direction:column"
              >
                <el-radio :label="3">
                  <span
                    style="font-size:18px;font-family:Microsoft YaHei;font-weight:400;color:rgba(254,44,74,1);"
                    >【默认地址】</span
                  >
                  江苏省南京市江宁区某某大道某某大厦某某栋某某某452室(张晓华 收)
                  18526584785
                </el-radio>
                <el-radio :label="6">
                  &nbsp;&nbsp;&nbsp;&nbsp;江苏省南京市江宁区某某大道某某大厦某某栋某某某452室(张晓华
                  收) 18526584785
                </el-radio>
              </el-radio-group>
              <!-- 新增地址 -->
              <div class="add">
                <span>+新增收获地址</span>
              </div>

              <!-- 点击兑换按钮 -->
              <div class="now_exchange" @click="addcart">
                <span>立即兑换</span>
              </div>
              <!-- 兑换成功模态框 -->
              <div class="successfullyPsd" v-show="successfullyPsd">
                <!-- 成功小图标 -->
                <div class="successIcon">
                  <img src="../../assets/image/1_1_2_icon_success.png" alt />
                </div>
                <span>兑换成功！</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <right></right>
    <!-- 引入底部 -->
    <foot></foot>
  </div>
</template>

<script>
import right from "../../components/common/right_logo";
import navigationBar from "../../components/navigationBar";
import foot from "../../components/footer";
export default {
  components: {
    navigationBar,
    foot,
    right
  },
  data() {
    return {
      successfullyPsd: false, //加入购物车成功模态框显示
      show: false,
      radio: 3,
      num: 1,
      current_integral: 2000,
      imgurl: "",
      goodsname: "正泰微型断路器 DZ267-3265hhhhhhhhhhhhhhhhhhhh...",
      integral: "300",
      goodsprice: "8.0"
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    addcart() {
      this.successfullyPsd = true;
      setTimeout(() => {
        this.successfullyPsd = false;
      }, 2000);
    }
  }
};
</script>

<style lang="scss" scoped>
// 加入购物车成功模态框样式
.successfullyPsd {
  width: 180px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 修改成功小图标
  .successIcon {
    width: 30px;
    height: 30px;
    margin: 15px auto;
  }
}
.container {
  width: 100%;
  background-color: rgb(238, 232, 232);
  padding-bottom: 26px;
  .section {
    width: 1200px;
    margin: 0 auto;
    .crumb {
      height: 40px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .goodsinfo {
      width: 1200px;
      height: 344px;
      background: rgba(255, 255, 255, 1);
      margin-bottom: 20px;
      padding: 16px;
      box-sizing: border-box;
      .title {
        display: block;
        width: 100%;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(50, 50, 50, 1);
        margin-bottom: 10px;
      }
      .info {
        display: flex;
        img {
          display: inline-block;
          width: 280px;
          height: 260px;
          margin-right: 34px;
          border: 1px solid red;
        }
        .right_info {
          width: 70%;
          height: 260px;
          span {
            display: flex;
            flex-direction: column;
          }
          & span:nth-of-type(1) {
            margin-top: 28px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(62, 62, 62, 1);
            margin-bottom: 50px;
          }
          & span:nth-of-type(2) {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 300;
            color: rgba(101, 101, 101, 1);
            margin-bottom: 24px;
          }
          & span:nth-of-type(3) {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(240, 58, 88, 1);
            margin-bottom: 20px;
          }
          & span:nth-of-type(4) {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(62, 62, 62, 1);
          }
        }
      }
    }
    .ex_msg {
      width: 1200px;
      height: 400px;
      background: rgba(255, 255, 255, 1);
      margin-bottom: 20px;
      padding: 16px;
      box-sizing: border-box;
      .title {
        display: block;
        width: 100%;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(50, 50, 50, 1);
        margin-bottom: 26px;
      }
      .ex_num {
        display: flex;
        align-items: center;
        .num {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 40px;
          margin-right: 30px;
        }
      }
      .ex_address {
        display: flex;
        margin-top: 20px;
        .address {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 40px;
          margin-right: 30px;
        }
        .option {
          position: relative;
          top: -12px;
          margin-top: 14px;
        }
        .add {
          cursor: pointer;
          width: 130px;
          height: 34px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(254, 44, 74, 1);
          border-radius: 10px;
          text-align: center;
          line-height: 34px;
          margin-top: 20px;
          span {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
          }
        }
        .now_exchange {
          cursor: pointer;
          margin-top: 40px;
          width: 240px;
          height: 50px;
          background: rgba(240, 58, 88, 1);
          border-radius: 6px;
          text-align: center;
          line-height: 50px;
          span {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
}
// 修改el的默认样式
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: rgba(254, 44, 74, 1);
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(77, 77, 77, 1);
}
::v-deep .el-radio__inner {
  border: 1px solid gray;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  background-color: #fff;
  cursor: pointer;
  box-sizing: border-box;
}
::v-deep .el-radio__label {
  font-size: 18px;
  padding-left: 10px;
}

::v-deep .el-radio {
  color: #606266;
  cursor: pointer;
  margin-top: 12px;
}
::v-deep .el-radio__inner:hover {
  border-color: gray;
}
::v-deep [data-v-2b264920] .el-radio__input.is-checked .el-radio__inner {
  width: 20px;
  height: 20px;
}
</style>
